<template>
  <el-drawer
    size="40%"
    class="custom-drawer"
    :visible.sync="drawer"
    :direction="direction"
    :with-header="false"
  >
    <div class="title"><h3>{{ title }}</h3></div>
    <div class="body">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-suffix="：" label-position="top">
        <el-form-item label="类型" props="modelType">
          <el-radio-group v-model="ruleForm.modelType">
            <el-radio :label="0"> 系统</el-radio>
            <el-radio :label="1"> 菜单</el-radio>
            <el-radio :label="2"> 按钮</el-radio>
            <el-radio :label="3"> 接口 </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId">
          <ElSelectTree
            v-show="parentIdShow"
            v-model="ruleForm.parentId"
            :data="permissionList"
            node-key="id"
            :props="{
              label: 'name',
              children: 'children'
            }"
            check-strictly
          />
        </el-form-item>
        <el-form-item v-show="urlShow" label="路由地址" prop="url">
          <el-input v-model="ruleForm.url" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="ruleForm.sort" />
        </el-form-item>
        <el-form-item v-show="openStyleShow" label="打开方式" prop="openStyle">
          <el-radio-group v-model="ruleForm.openStyle">
            <el-radio :label="0"> 内部打开</el-radio>
            <el-radio :label="1"> 外部打开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="authorityShow" label="授权标识" prop="authority">
          <el-input v-model="ruleForm.authority" placeholder="多个逗号分隔，如：sys:menu:save,sys:menu:update" />
        </el-form-item>
        <el-form-item v-show="iconShow" label="图标" prop="icon">
          <el-input v-model="ruleForm.icon" />
        </el-form-item>
      </el-form>
      <div class="f-r a-c j-e" style="margin: 10px 0;">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button @click="drawer = false">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { http_permission } from '@/api'

export default {
  name: 'EditForm',
  props: {
    title: String
  },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      permissionList: [],
      ruleForm: {
        modelType: 0,
        name: '',
        url: '',
        openStyle: 0,
        parentId: '',
        sort: 0,
        icon: ''
      },
      detail: {}
    }
  },
  computed: {
    rules() {
      if (this.$refs.formRef) {
        this.$refs.formRef.clearValidate()
      }
      return {
        name: [{ required: true, message: '不能为空' }]
      }
    },
    parentIdShow() {
      if (this.ruleForm.modelType == 0) {
        return false
      }
      if (this.ruleForm.modelType == 1) {
        return true
      }
      if (this.ruleForm.modelType == 2) {
        return true
      }
      if (this.ruleForm.modelType == 3) {
        return true
      }
      return false
    },
    urlShow() {
      if (this.ruleForm.modelType == 0) {
        return false
      }
      if (this.ruleForm.modelType == 1) {
        return true
      }
      if (this.ruleForm.modelType == 2) {
        return false
      }
      if (this.ruleForm.modelType == 3) {
        return false
      }
      return false
    },
    openStyleShow() {
      if (this.ruleForm.modelType == 0) {
        return false
      }
      if (this.ruleForm.modelType == 1) {
        return true
      }
      if (this.ruleForm.modelType == 2) {
        return false
      }
      if (this.ruleForm.modelType == 3) {
        return false
      }
      return false
    },
    iconShow() {
      if (this.ruleForm.modelType == 0) {
        return false
      }
      if (this.ruleForm.modelType == 1) {
        return true
      }
      if (this.ruleForm.modelType == 2) {
        return false
      }
      if (this.ruleForm.modelType == 3) {
        return false
      }
      return false
    },
    authorityShow() {
      if (this.ruleForm.modelType == 0) {
        return false
      }
      if (this.ruleForm.modelType == 1) {
        return false
      }
      if (this.ruleForm.modelType == 2) {
        return true
      }
      if (this.ruleForm.modelType == 3) {
        return true
      }
      return false
    }
  },

  methods: {
    open(detail) {
      this.detail = detail
      this.drawer = true
      for (const ruleFormKey in this.ruleForm) {
        this.ruleForm[ruleFormKey] = this.detail[ruleFormKey]
      }
      console.log('this.detail', this.detail)
      http_permission.tree().then(res => {
        this.permissionList = res
      })
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          http_permission.update({ id: this.detail.id }, {
            ...this.ruleForm
          }).then(res => {
            this.$emit('save')
            this.onClose()
          })
        }
      })
    },
    onClose() {
      this.drawer = false
      this.ruleForm = {
        modelType: 0,
        name: '',
        url: '',
        openStyle: 0,
        parentId: '',
        sort: 0,
        icon: ''
      }
      if (this.$refs.formRef) {
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate()
        })
      }
    }
  }
}
</script>

<style lang="scss">
.upload-demo2 {
  .el-upload,
  .el-upload-dragger{
    width: 100%;
  }
}
</style>
